<template>
	<view class="content">
		<!--顶部导航栏-->
				<view class="uni-tab-bar">
					<scroll-view scroll-x class="uni-swiper-tab">
						<block v-for="(activityType,index) in activityTypes" :key="index">
							<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index,activityType.idPath)">
								{{activityType.name}}
								<view class="swiper-tab-line">
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!--内容区-->
				<view class="uni-tab-bar">
<!-- 					<swiper :current="tabIndex" @change="tabChange">
						<swiper-item v-for="(content,index) in contentList" :key="index" >
							<view class="swiper-item">{{content}}</view>
						</swiper-item>
					</swiper> -->
					<!-- 轮播 -->
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500">
						<swiper-item>
							<view class="swiper-item uni-bg-red" style="height: 200px;"><image src="../../static/activity-img/313941619799949.jpg" style="width: 100%;height: 200px;"></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green" style="height: 200px;"><image src="../../static/activity-img/timg.jpg" style="width: 100%;height: 200px;"></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue" style="height: 200px;"><image src="../../static/activity-img/20207281359468725.jpg" style="width: 100%;height: 200px;"></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue" style="background-color: blue;height: 200px;"><image src="../../static/activity-img/timg-b.jpg" style="width: 100%;height: 200px;"></image></view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 中部小图标按钮 -->
				<view class="icon-button-wrap">
					<view><image src="../../static/icon-button/icon-button-fabu.png"></image><view class="icon-button-content">发布活动</view></view>
					<view><image src="../../static/icon-button/icon-button-jingpin.png"></image><view class="icon-button-content">精品</view></view>
					<view><image src="../../static/icon-button/icon-button-kanban.png"></image><view class="icon-button-content">看板</view></view>
					<view><image src="../../static/icon-button/icon-button-youhui.png"></image><view class="icon-button-content">优惠券</view></view>
					<view><image src="../../static/icon-button/icon-button-rili.png"></image><view class="icon-button-content">活动日历</view></view>
					<view><image src="../../static/icon-button/icon-button-shoucang.png"></image><view class="icon-button-content">收藏</view></view>
					<view><image src="../../static/icon-button/icon-button-fujin.png"></image><view class="icon-button-content">附近</view></view>
					<view><image src="../../static/icon-button/icon-button-VIP.png"></image><view class="icon-button-content">VIP</view></view>
				</view>
				<view class="recommend-wrap">
					<text class="recommend-title">强力推荐</text>
					<view class="recommend-content">
						<uni-list>
						    <!-- 垂直排列，略缩图显示大图 -->
						    <uni-list-item direction="column" note=note >
						        <template v-slot:header>
						            <view class="uni-title">{{activities[0].description}}</view>
						            <view class="uni-thumb uni-content list-picture"><image :src="activities[0].poster" mode="aspectFill"></image></view>
						        </template>
						    </uni-list-item>
						</uni-list>
					</view>

					<uni-list v-for="(activity,index) in activities" :key="index">
					    <!-- 水平排列，左图右文 -->
					    <uni-list-item :title="activity.description" :note="activity.topic" thumbSize="lg" rightNote="" :thumb="activity.poster"></uni-list-item>
					</uni-list>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,	//选中标签栏的序列
				contentList: [
								"精选",
								"行业",
								"生活",
								"亲子",
								'学习',
							 ],
				swiperHeight: 0,
				activities:[{}],
				activityTypes:[{}]
			}
		},
		onLoad() {
			// this.getActivity();
			this.getActivityType();
			this.findByidPath(1);
		},
		methods: {
			//获取活动类型
			async getActivityType() {
				const res = await this.$myRequest({
					url: '/acp-activity/acpActivityType/findParentType',
					method: 'GET'
				})
				this.activityTypes=res.data.data;
			},
			//获取活动信息列表
			// async getActivity() {
			// 	const res = await this.$myRequest({
			// 		url: '/acp-activity-front/acpActivity/findAllActivities',
			// 		method: 'POST'
			// 	})
			// 	// console.log(res)
			// 	this.activities=res.data.data;
			// },
			//根据idPath查询活动
			async findByidPath(idPath){
				// alert(idPath);
				const res = await this.$myRequest({
					url: '/acp-activity/acpActivity/findByIdPath',
					method: 'GET',
					data:{
						"idPath":idPath
					}
				})
				// console.log(res)
				this.activities=res.data.data;
			},
			//顶部导航同步索引,查询此类型的活动
			toggleTab(index,idPath){
				this.tabIndex = index
				this.findByidPath(idPath);
			},

			//滑动切换swiper
			tabChange(e){
				// console.log(e.detail)
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			},
			//监听原生标题栏搜索输入框点击事件
			onNavigationBarSearchInputClicked(e) {
				console.log('事件执行了');
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			
			
	},
	}
</script>

<style>
		/* 顶部导航样式 */
		.swiper-tab-list{
			color: #969696;
			font-weight: bold;
		}
		.uni-tab-bar .active{
			color: #343434;
		}
		
		.active .swiper-tab-line{
			border-bottom: 6upx solid #FEDE33;
			width: 70upx;
			margin: auto;
			border-top: 6upx solid #FEDE33;
			border-radius: 20upx;
		}
		.uni-swiper-tab{
			border-bottom: 1upx solid #eeeeee;
		}
		/* 导航下的轮播样式 */
		.swiper{
			width: 90%;
			margin: 10rpx auto;
			overflow: hidden;
			border-radius: 10rpx;
		}
		/*首页中部小图标按钮*/
		.icon-button-wrap{
			width: 90%;
			margin: 10rpx auto;
			text-align: center;
			height: 240rpx;
			/* border: #007AFF 1px solid; */
		}
		.icon-button-wrap>view{
			float: left;
			height: 100rpx;
			width: 100rpx;
			margin: 10rpx 34rpx;
			
		}
		.icon-button-wrap image{
			width: 60rpx;
			height: 60rpx;
			
		}
		.icon-button-content{
			height: 20rpx;
			font-size: 12rpx;
			margin-top: -16rpx;
			/* border: #007AFF 1px solid; */
		}
		/* 推荐栏目 */
		.recommend-wrap{
			width: 90%;
			/* border: #007AFF 1px solid; */
			margin: 10rpx auto;
		}
		.recommend-title{
			/* border-:#007AFF 1px solid; */
			/* margin-bottom: -50rpx; */
			font-size: 30rpx;
			width: 100%;
			font-weight: 900;
			font-family: 黑体;
		}
		.recommend-content{
			
		}
</style>
